<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Loading SuperMap WMS in ArcGIS API for JavaScript</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script src="https://js.arcgis.com/4.6/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/geometry/Extent",
            "esri/layers/GraphicsLayer",
            "esri/Graphic",
            "esri/geometry/geometryEngine",
            "esri/geometry/Polygon",
            "esri/symbols/SimpleFillSymbol",
            "esri/Color"
        ], function (Map, MapView, Extent, GraphicsLayer, Graphic, geometryEngine, Polygon, SimpleFillSymbol, Color) {

            var map = new Map({
                basemap: "streets"
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-70, 25],
                zoom: 4
            });
            view.when(function () {
                // 在视图加载完成后执行以下操作
                var viewExtent = view.extent;
                if (viewExtent) {
                    // 执行您的操作，如计算差异、添加图形等
                    var graphicsLayer = new GraphicsLayer();
                    map.add(graphicsLayer);

                    var polygon = new Polygon({
                        rings: [[-64.78, 32.3], [-66.07, 18.45], [-80.21, 25.78], [-64.78, 32.3]]
                    });


                    var polygon2 = new Polygon({
                        rings: [[-180, 90], // 左上角
                        [180, 90], // 右上角
                        [180, -90], // 右下角
                        [-180, -90], // 左下角
                        [-180, 90] // 闭合
                        ]
                    });

                    console.log("111", map.extent, view.extent, polygon)
                    var outsidePolygon = geometryEngine.difference(polygon2, polygon);
                    var outsideGraphic = new Graphic({
                        geometry: outsidePolygon,
                        symbol: {
                            type: "simple-fill", // autocasts as new SimpleFillSymbol()
                            color: [0, 0, 0, 0.8],
                            outline: {
                                // autocasts as new SimpleLineSymbol()
                                color: [255, 255, 255, 0.7],
                                width: 1
                            }
                        }
                    });

                    graphicsLayer.add(outsideGraphic);
                    const fillSymbol = {
                        type: "simple-fill", // autocasts as new SimpleFillSymbol()
                        color: [227, 139, 79, 0.8],
                        outline: {
                            // autocasts as new SimpleLineSymbol()
                            color: [255, 255, 255],
                            width: 1
                        }
                    };

                    var graphic = new Graphic({
                        geometry: polygon,
                        symbol: fillSymbol
                    });

                    graphicsLayer.add(graphic);
                } else {
                    console.log("View extent is null.");
                }

            });

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>